<template>
  <div>
    <h2>基本资料</h2>
    <div class="m">
      <span>用户名</span><span>{{user.username}}</span>
    </div>
    <div class="m">
      <span>邮箱</span><span>{{user.email}}</span>
      <span v-if="user.state===-1">
        <Tag color="error"><p @click="showVerifyEmailModal">未验证</p></Tag>
      </span>
      <span v-if="user.state===0">
        <Tag color="success">已验证</Tag>
      </span>
    </div>
    <div class="m">
      <span>注册时间</span><span>{{user.createTime}}</span>
    </div>
    <Modal
      v-model="verifingEmail"
      title="验证邮箱"
      :closable="false"
    >
      <div>
        <span>{{user.email}}</span>
        <Button type="primary" :disabled="!canSendEmailCode" @click="sendEmailCode" style="float: right; margin-right: 30px;">{{sendEmailCodeButtonText}}</Button>
      </div>
      <div slot="footer">
        <Input v-model="emailProps.code" placeholder="Email code" style="width: 200px; float: left" />
        <Button type="primary" @click="verifyEmail">验证</Button>
        <Button @click="verifingEmail = false" style="margin-left: 8px">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getUserInfo, verifyEmail as handleVerifyEmail } from '../api/user'
import { sendEmailCode as handleSendEmailCode } from '../api/auth'
export default {
  name: 'userinfo',
  data () {
    return {
      user: {},
      verifingEmail: false,
      emailProps: {
        code: ''
      },
      nextEmailCodeTime: 0
    }
  },

  computed: {
    canSendEmailCode () {
      return this.nextEmailCodeTime <= 0
    },
    sendEmailCodeButtonText () {
      if (this.nextEmailCodeTime === 0) {
        return '发送验证码'
      } else {
        return `${this.nextEmailCodeTime}s后重新发送`
      }
    }
  },

  methods: {
    showVerifyEmailModal () {
      this.verifingEmail = true
    },
    verifyEmail () {
      handleVerifyEmail(this.emailProps)
        .then(res => {
          this.$Notice.success({
            title: '验证成功!',
            duration: 5
          })
          this.verifingEmail = false
          this.fetchUserInfo()
        })
        .catch(err => {
          if (err.response) {
            this.$Notice.error({
              title: '验证失败!',
              desc: err.response.data.message,
              duration: 5
            })
          }
        })
    },
    sendEmailCode () {
      handleSendEmailCode(this.emailProps.email)
        .then(res => {
          this.emailProps = {
            ...this.emailProps,
            ...res.data
          }
          this.$Notice.success({
            title: '发送成功!',
            desc: '验证码已发送至您的邮箱，请尽快完成验证!',
            duration: 5
          })

          this.nextEmailCodeTime = 90
          const interval = setInterval(() => {
            this.nextEmailCodeTime = this.nextEmailCodeTime - 1
            if (this.nextEmailCodeTime <= 0) {
              window.clearInterval(interval)
            }
          }, 1000)
        })
    },
    fetchUserInfo () {
      getUserInfo().then(res => {
        this.user = res.data
        this.emailProps.email = res.data.email
      })
    }
  },

  mounted: function () {
    this.fetchUserInfo()
  }
}
</script>

<style scoped>
.m {
  margin: 15px;
}

span {
  font-size: 18px;
  padding-left: 10px;
}

</style>
